<template>
  <div>
    <img @click="toShare" src="@/assets/img/my/advertisement.png" mode="" style="max-width: 90%; margin-left: 0.4rem;" >
    <div class="bigDivCss" v-for="(val, index) in catalogData" :key="index" @click="funcClick(val)" >
      <div class="flexCenter" style="margin-left: 0.2rem;" >
        <img :src="val.img" mode="" >
        <span>{{val.name}}</span>
      </div>
      <div style="margin-right: 0.2rem;" >
        <img src="@/assets/img/my/arrow.png" mode="" style="width: 0.13rem; height: 0.2rem;" >
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { parentDirectoryApi } from '@/api/myNewApi'
export default {
  components: {
  },
  props: {
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId
    }),
    identityData () {
      return this.$store.state.myInfo.identityData
    },
    isMini () {
        return this.$store.state.user.isMini
    }
  },
  watch: {
    identityData(){
      if (this.identityData.canSwitchIdentity) {
        this.catalogData.push({id: 4, name: '切换身份', img: require('@/assets/img/my/identity.png') })
      }
    }
  },
  data () {
    return {
     
      catalogData: [
        {id: 1, name: '我的孩子', img: require('@/assets/img/my/children.png') },
        {id: 2, name: '校园一卡通账户', img: require('@/assets/img/my/card.png') },
        {id: 3, name: '学生证信息', img: require('@/assets/img/my/certificates.png') },
        {id: 5, name: '我的订单', img: require('@/assets/img/my/order.png') },
      ]
    }
  },
  methods: {
    funcClick (e) {
      if (e.id == 4) {
        this.$router.push('/signUp/choice')
      }
      if (e.id == 1) {
        this.$router.push('children')
      }
      if (e.id == 2) {
        this.$router.push('oneCard')
      }
      if (e.id == 3) {
        this.$router.push('studentIDCard')
      }
      if (e.id == 5) {
        this.$router.push('myOrder')
      }
    },
    toShare () {
      this.$router.push('share')
    } 
  },
  async mounted() {
    if(this.isMini){
       this.catalogData.splice(2,1)
    }

   
    
  }
}
</script>

<style lang="less" scoped>
.bigDivCss {
  width: 6.6rem;
  height: 1rem;
  margin-left: 0.3rem;
  font-size: 0.28rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 0.4rem;
    margin-right: 0.2rem;
  }
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}
</style>
